<template>
	<view style="height: 1000rpx;overflow: scroll">
		<view class="topic" v-for="(item,index) in itemData.itemList" :key="item.id">
			<view style="position: relative;">
				<view class="topic_index">{{index+1}}</view>
				<text style="width: 86%;display:inline-block;margin: 0 0 0 75rpx;">{{item.inspItemName}}</text>
			</view>
			<view v-for="(items,i) in item.inspResult" :key='i'>
				<u-radio-group v-model="items.checked" size='30' style='margin:35rpx 0;' :disabled="type=='view'">
					<view v-for="(radio,d) in  items.children" :key="d" style="width: 100%;">
						<u-radio activeColor="#1590EF" labelSize='30' :label="radio.dictValue" :name='radio.dictKey'
							style='width: 80%;padding: 10rpx;'>
						</u-radio>
					</view>
					<image src="/static/dailySupervision/more.png"
						style="width: 15rpx;height: 45rpx;display: inline-block;" @click="moreClick(index)"></image>
				</u-radio-group>
			</view>

			<view style="display: inline-block;width: 100%;" v-for="key in item.inspRecord">
				<text style="padding:0 0 0 10rpx;font-size: 26rpx;display: inline-block;">
					{{key.dictValue}}</text>
				<u--input v-model="key.blankValue " border="bottom" clearable style='display: inline-block;width: 30%;'
					:disabled="type=='view'">
				</u--input>
			</view>
		</view>
		<view>
			<u-button type="primary" text='保存' shape="circle" class='submit' @click='submitClick()'
				v-if="type!=='view'">
			</u-button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/common/api/safety.js'
	import {
		deepClone,
	} from '@/common/util.js'

	export default {
		components: {},
		props: ['itemData', 'type'],
		data() {
			return {
				options: {},
				tableData: {},
				updateView: false
			}
		},
		onLoad(option) {
			this.options = option
		},
		mounted() {
			// this.itemData.itemList[0].inspResult[0].selected = true
			this.itemData.itemList = this.initTable(this.itemData.itemList)
		},
		methods: {
			// 更多
			moreClick(i) {
				const moreData = {
					enforcementBasis: this.itemData.itemList[i].enforcementBasis, //处罚依据
					punishmentBasis: this.itemData.itemList[i].punishmentBasis, //执法依据
					inspStandard: this.itemData.itemList[i].inspStandard, //检查标准
					coMaterials: this.itemData.itemList[i].coMaterialsName, //企业上传材料
					uploaded: this.itemData.itemList[i].materialsFile, //企业已经上传材料
					inspMethod: this.itemData.itemList[i].inspMethod, //检查方法
				}
				this.$goBack('./projectDetails?moreData=' + encodeURIComponent(JSON.stringify(moreData)), 2);
			},

			//提交
			submitClick() {
				// let itemStatus = true;
				const arrData = []
				const formData = this.itemData.itemList.map((item) => {
					const inspOpt = [],
						inspBlank = [];
					item.inspResult.forEach((obj) => {
						if (obj.checked) {
							inspOpt.push({
								key: obj.checked,
							});
						}
					});
					item.inspRecord.map((obj) => {
						if (obj.blankValue) {
							inspBlank.push({
								key: obj.dictKey,
								value: obj.blankValue,
							});
						}
					});
					return {
						inspItemId: item.id,
						inspOpt,
						inspBlank,
					};

				});
				formData.map((key, index) => {
					if (key.inspOpt.length !== 0 || key.inspBlank.length !== 0) {
						// formData.splice(index, 1)
						arrData.push(key)
					}
				})

				this.$emit('changeSave', arrData)

			},

			// // 选择的change
			// radioChange() {
			// 	this.carNum = 0
			// 	this.amount = this.itemData.itemList.length
			// 	this.itemData.itemList.map(item => {
			// 		let aNum = 0
			// 		item.inspResult.forEach(items => {
			// 			if (items.checked !== "") {
			// 				aNum++
			// 			}
			// 		})
			// 		if (item.inspResult.length == aNum) {
			// 			this.carNum++
			// 		}
			// 	})
			// },
			// 把查询到的每个项目的结果、记录项进行分组处理
			initGroup(list) {
				const res = [];
				const arr = [];
				for (let a = 0; a < list.length; a++) {
					if (list[a].children) {
						return list
					}
				}
				list.forEach((item) => {
					let index = arr.indexOf(item.dictGroup);
					if (index === -1) {
						arr.push(item.dictGroup);
						index = arr.length - 1;
						res[index] = {
							checked: "",
							children: [],
						};
					}
					if (item.selected) {
						res[index].checked = item.dictKey;
					}
					res[index].children.push(item);
				});
				return res;
			},

			//初始化表格 
			initTable(tableData) {
				tableData = deepClone(tableData);
				let PTI = 0;
				tableData.forEach((item, i) => {
					const prev = tableData[PTI];
					item.inspResult = this.initGroup(item.inspResult);
					// item.inspRecord = this.initGroup(item.inspRecord);
					if (prev.inspItemCode === item.inspItemCode) {
						if (prev.rowspan) {
							prev.rowspan += 1;
						} else {
							prev.rowspan = 1;
						}
					} else {
						PTI = i;
						item.rowspan = 1;
					}
				});
				return tableData;
			},

		},
	}
</script>

<style lang="scss" scoped>
	.progressBar {
		padding: 20rpx;
	}

	.topic {
		padding: 20rpx 40rpx;
		border-bottom: 1px #F1F1F1 solid;

		.topic_index {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50%;
			display: inline-block;
			background-color: #1590EF;
			color: white;
			margin: 0 30rpx 0 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.topic_title {
		display: block;
		margin: 30rpx 0;
		border-left: 2px #1590EF solid;
		padding: 0 20rpx;
	}

	.topic_trouble {
		padding: 20px 20px;
	}


	.submit {
		width: 30%;
		margin: 20px auto;
	}


	.file-list {
		flex: 1;

		.file-item {
			float: left;
			width: 22%;
			text-align: center;
			height: 140rpx;
			line-height: 140rpx;
			margin-right: 4%;
			margin-bottom: 2%;
			position: relative;

			.file-img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}

			.file-del {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(30%, -30%);
				border-radius: 50%;
				width: 0;
				height: 0;
				border: 20rpx solid #f00;

				&::after {
					content: "";
					width: 20rpx;
					display: block;
					transform: translate(-50%, -50%);
					background-color: #ffffff;
					height: 4rpx;
				}
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(n+5) {
				margin-top: calc(4% / 3);
			}

		}

		.file-upload-btn {
			box-sizing: border-box;
			border: 1px solid #ddd;
			background: url('/static/img/camera.png') no-repeat center;
			background-size: 70%;
		}
	}
</style>